<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>选择体检日期</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="date-box">
                <i class="fa fa-caret-left" @click="substractMonth"></i>
                <p >{{year}}年{{month}}月
                </p>
                <i class="fa fa-caret-right" @click="addMonth"></i>
            </div>
            <table>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
            </table>
            <ul>
                <li v-for="(calendar,index) in calendarArr" :key="calendar.ymd">
                    <p :class="{pselect: calendar.isselected==1,fontcolor:calendar.remainder != null && calendar.remainder !=0}"
                    @click="selectDay(index)"
                    >{{calendar.day}}
                    </p>
                    <p>{{calendar.remainder !=0 && calendar.remainder != null? "余"+calendar.remainder:""}}</p>
                </li>
            </ul>
        </section>

        <div class="bottom-btn">
            <div></div>
            <div @click="toConfirmOrder">下一步</div>
        </div>
        
        <div class="bottom-ban">
        <Foot></Foot>
        </div>

    </div>  
</template>

<script>
import Foot from '../components/Foot.vue'
import { toRefs,toRef,reactive } from 'vue';
import axios from '../axios';
import { useRouter,useRoute } from 'vue-router';
import router from '../router';
import { getSessionStorage } from '../common';

export default {
    components:{Foot},
    setup(){
        
        let date = new Date()
        const route = useRoute()
        const router = useRouter()

        const state = reactive({
            //日历数组    
            calendarArr:[],
            year: date.getFullYear(),
            month: date.getMonth()+1,
            day: date.getDay()-1,
            smId: route.query.smId,
            hpId: route.query.hpId,
            selectDay:" "
        })

        getCalendar()
        //定义事件函数
        function getCalendar(){
            axios.post('/api/listCalendar', {
                        year: state.year,
                        month: state.month,
                        hpId: state.hpId
                    },{
                    headers: {
                        'token': getSessionStorage("token")
                    }
                    })
                    .then(function (response) {
                        console.log(response)
                        state.calendarArr = response.data.data
                        for(let i= 0 ; i < state.calendarArr.length ; i++){
                            if(state.calendarArr[i].ymd != null && state.calendarArr[i].ymd !=""){
                                state.calendarArr[i].day = parseInt(
                                    state.calendarArr[i].ymd.substring(8,state.calendarArr[i].ymd.length));
                                // console.log("第i天:"+state.calendarArr[i].day)
                            }
                            //给可以预约的属性添加一个属性 用来区分是否被选中
                            if(state.calendarArr[i].remainder != null && state.calendarArr[i].remainder != 0){
                                state.calendarArr[i].isselected = 0
                            }
                            
                            // console.log(state.calendarArr[i].ymd)
                            // console.log(state.day)
                            // if(state.calendarArr[i].ymd == date){
                            //     state.calendarArr[i].isselected = 1
                            // }else{
                            //     state.calendarArr[i].isselected = 0
                            // }
                        }

                    })
                    .catch(function (error) {
                    console.log(error);
                    })
        }

        function substractMonth(){
            if(state.month>1){
                state.month--;
            }else{
                state.year--
                state.month=12
            }
            getCalendar()
        }

        function addMonth(){
            if(state.month<12){
                state.month++
            }else{
                state.year++
                state.month=1
            }
            getCalendar()
        }

        function selectDay(index){
            if(state.calendarArr[index].remainder==null || state.calendarArr[index].remainder==0){
                return
            }
            
            for(let i = 0 ; i < state.calendarArr.length; i++){
                state.calendarArr[i].isselected = 0
            }
            state.calendarArr[index].isselected = 1
            state.selectDay = state.calendarArr[index].ymd
        }

        function toConfirmOrder(){
            if(state.selectDay == ""){
                alert("请选择预约日期")
            }
            router.push({name:"ComfirmOrder",query:{hpId:state.hpId,smId:state.smId,selectDay:state.selectDay}})
        }

        return{
            ...toRefs(state),
            getCalendar,
            substractMonth,
            addMonth,
            selectDay,
            toConfirmOrder
        }
    }
}
</script>

<style>
/*********************** 总容器 ***********************/
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header{
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;
    
    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}
header .fa{
    font-size: 8vw;
}

/*********************** common样式 ***********************/
.top-ban{
    width: 100%;
    height: 15.7vw;
}
.bottom-ban{
    width: 100%;
    height: 14.2vw;
}

/*********************** section ***********************/
section{
    width: 82vw;
    margin: 0 auto;
    margin-top: 12vw;
}
section .date-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.5vw;
    font-weight: 600;
}
section .date-box p{
    color: #000;
}
section .date-box i{
    color: #999;
    user-select: none;
    cursor: pointer;
}
section table{
    width: 100%;
    font-size: 3.8vw;
}
section table tr th{
    text-align: center;
    font-weight: 600;
    line-height: 12vw;
}

section ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
section ul li{
    width: 14.28%;
    height: 12vw;
    font-weight: 600;
    color: #999;
}
section ul li p:first-child{
    width: 6vw;
    height: 6vw;
    margin: 0 auto;
    border-radius: 3vw;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 4.2vw;

    user-select: none;
    cursor: pointer;
}
section ul li p:last-child{
    font-size: 3vw;
    font-weight: 300;
    text-align: center;
    user-select: none;
}

.fontcolor {
    color: #333;
}

.pselect{
    background-color: #FB902B;
    color: #FFF;
}

/*********************** bottom-btn ***********************/
.bottom-btn{
    width: 100%;
    height: 12vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    bottom: 14.2vw;

    display: flex;
}
.bottom-btn div:first-child{
    flex: 2;
}
.bottom-btn div:last-child{
    flex: 1;
    background-color: #117C94;
    text-align: center;
    line-height: 12vw;
    font-size: 5vw;
    color: #FFF;

    user-select: none;
    cursor: pointer;
}
</style>